<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS3-正方体动画</title>
	<style>
		/*容器*/

		.container {
			-webkit-perspective: 1000px;
			-moz-perspective: 1000px;
			-ms-perspective: 1000px;
			perspective: 1000px;
		}

		/*piece盒子*/

		.piece-box {
			position: relative;
			width: 200px;
			height: 200px;
			margin: 300px auto;
			perspective-origin: 50% 50%;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;
			animation: pieceRotate 5s;
			-moz-animation: pieceRotate 5s;
			/* Firefox */
			-webkit-animation: pieceRotate 5s;
			/* Safari and Chrome */
			-o-animation: pieceRotate 5s;
			/* Opera */
		}

		/*为了实现第二个动画加的盒子*/

		.piece-box2 {
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
			-ms-transform-style: preserve-3d;
			transform-style: preserve-3d;
			animation: boxRotate 5s 10s infinite;
			-moz-animation: boxRotate 5s 10s infinite;
			/* Firefox */
			-webkit-animation: boxRotate 5s 10s infinite;
			/* Safari and Chrome */
			-o-animation: boxRotate 5s 10s infinite;
			/* Opera */
		}

		/*piece通用样式*/

		.piece {
			position: absolute;
			width: 200px;
			height: 200px;
			background: red;
			opacity: 0.5;

		}

		.piece-1 {
			background: #FF6666;
			-webkit-transform: rotateY(0deg) translateZ(173.2px);
			-ms-transform: rotateY(0deg) translateZ(173.2px);
			-o-transform: rotateY(0deg) translateZ(173.2px);
			transform: rotateY(0deg) translateZ(173.2px);
			animation: piece1Rotate 5s 5s;
			-moz-animation: piece1Rotate 5s 5s;
			/* Firefox */
			-webkit-animation: piece1Rotate 5s 5s;
			/* Safari and Chrome */
			-o-animation: piece1Rotate 5s 5s;
			/* Opera */
			-webkit-animation-fill-mode: forwards;
			/* Chrome, Safari, Opera */
			animation-fill-mode: forwards;

		}

		.piece-2 {
			background: #FFFF00;
			-webkit-transform: rotateY(60deg) translateZ(173.2px);
			-ms-transform: rotateY(60deg) translateZ(173.2px);
			-o-transform: rotateY(60deg) translateZ(173.2px);
			transform: rotateY(60deg) translateZ(173.2px);
			animation: piece2Rotate 5s 5s;
			-moz-animation: piece2Rotate 5s 5s;
			/* Firefox */
			-webkit-animation: piece2Rotate 5s 5s;
			/* Safari and Chrome */
			-o-animation: piece2Rotate 5s 5s;
			/* Opera */
			-webkit-animation-fill-mode: forwards;
			/* Chrome, Safari, Opera */
			animation-fill-mode: forwards;
		}

		.piece-3 {
			background: #006699;
			-webkit-transform: rotateY(120deg) translateZ(173.2px);
			-ms-transform: rotateY(120deg) translateZ(173.2px);
			-o-transform: rotateY(120deg) translateZ(173.2px);
			transform: rotateY(120deg) translateZ(173.2px);
			animation: piece3Rotate 5s 5s;
			-moz-animation: piece3Rotate 5s 5s;
			/* Firefox */
			-webkit-animation: piece3Rotate 5s 5s;
			/* Safari and Chrome */
			-o-animation: piece3Rotate 5s 5s;
			/* Opera */
			-webkit-animation-fill-mode: forwards;
			/* Chrome, Safari, Opera */
			animation-fill-mode: forwards;
		}

		.piece-4 {
			background: #009999;
			-webkit-transform: rotateY(180deg) translateZ(173.2px);
			-ms-transform: rotateY(180deg) translateZ(173.2px);
			-o-transform: rotateY(180deg) translateZ(173.2px);
			transform: rotateY(180deg) translateZ(173.2px);
			animation: piece4Rotate 5s 5s;
			-moz-animation: piece4Rotate 5s 5s;
			/* Firefox */
			-webkit-animation: piece4Rotate 5s 5s;
			/* Safari and Chrome */
			-o-animation: piece4Rotate 5s 5s;
			/* Opera */
			-webkit-animation-fill-mode: forwards;
			/* Chrome, Safari, Opera */
			animation-fill-mode: forwards;
		}

		.piece-5 {
			background: #FF0033;
			-webkit-transform: rotateY(240deg) translateZ(173.2px);
			-ms-transform: rotateY(240deg) translateZ(173.2px);
			-o-transform: rotateY(240deg) translateZ(173.2px);
			transform: rotateY(240deg) translateZ(173.2px);
			animation: piece5Rotate 5s 5s;
			-moz-animation: piece5Rotate 5s 5s;
			/* Firefox */
			-webkit-animation: piece5Rotate 5s 5s;
			/* Safari and Chrome */
			-o-animation: piece5Rotate 5s 5s;
			/* Opera */
			-webkit-animation-fill-mode: forwards;
			/* Chrome, Safari, Opera */
			animation-fill-mode: forwards;
		}

		.piece-6 {
			background: #FF6600;
			-webkit-transform: rotateY(300deg) translateZ(173.2px);
			-ms-transform: rotateY(300deg) translateZ(173.2px);
			-o-transform: rotateY(300deg) translateZ(173.2px);
			transform: rotateY(300deg) translateZ(173.2px);
			animation: piece6Rotate 5s 5s;
			-moz-animation: piece6Rotate 5s 5s;
			/* Firefox */
			-webkit-animation: piece6Rotate 5s 5s;
			/* Safari and Chrome */
			-o-animation: piece6Rotate 5s 5s;
			/* Opera */
			-webkit-animation-fill-mode: forwards;
			/* Chrome, Safari, Opera */
			animation-fill-mode: forwards;
		}


		/*走马灯动画*/

		@keyframes pieceRotate {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateY(360deg);
				-ms-transform: rotateY(360deg);
				-o-transform: rotateY(360deg);
				transform: rotateY(360deg);
			}
		}

		/* Firefox */

		@-moz-keyframes pieceRotate {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateY(360deg);
				-ms-transform: rotateY(360deg);
				-o-transform: rotateY(360deg);
				transform: rotateY(360deg);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes pieceRotate {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateY(360deg);
				-ms-transform: rotateY(360deg);
				-o-transform: rotateY(360deg);
				transform: rotateY(360deg);
			}
		}

		/* Opera */

		@-o-keyframes pieceRotate {
			0% {
				-webkit-transform: rotateY(0deg);
				-ms-transform: rotateY(0deg);
				-o-transform: rotateY(0deg);
				transform: rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateY(360deg);
				-ms-transform: rotateY(360deg);
				-o-transform: rotateY(360deg);
				transform: rotateY(360deg);
			}
		}


		/*以下是走马灯转变为六面正方体的动画*/

		/*front*/

		@keyframes piece1Rotate {
			0% {
				-webkit-transform: rotateY(0deg) translateZ(173.2px);
				-ms-transform: rotateY(0deg) translateZ(173.2px);
				-o-transform: rotateY(0deg) translateZ(173.2px);
				transform: rotateY(0deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(100px);
				-ms-transform: rotateY(0deg) translateZ(100px);
				-o-transform: rotateY(0deg) translateZ(100px);
				transform: rotateY(0deg) translateZ(100px);
			}
		}

		/* Firefox */

		@-moz-keyframes piece1Rotate {
			0% {
				-webkit-transform: rotateY(0deg) translateZ(173.2px);
				-ms-transform: rotateY(0deg) translateZ(173.2px);
				-o-transform: rotateY(0deg) translateZ(173.2px);
				transform: rotateY(0deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(100px);
				-ms-transform: rotateY(0deg) translateZ(100px);
				-o-transform: rotateY(0deg) translateZ(100px);
				transform: rotateY(0deg) translateZ(100px);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes piece1Rotate {
			0% {
				-webkit-transform: rotateY(0deg) translateZ(173.2px);
				-ms-transform: rotateY(0deg) translateZ(173.2px);
				-o-transform: rotateY(0deg) translateZ(173.2px);
				transform: rotateY(0deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(100px);
				-ms-transform: rotateY(0deg) translateZ(100px);
				-o-transform: rotateY(0deg) translateZ(100px);
				transform: rotateY(0deg) translateZ(100px);
			}
		}

		/* Opera */

		@-o-keyframes piece1Rotate {
			0% {
				-webkit-transform: rotateY(0deg) translateZ(173.2px);
				-ms-transform: rotateY(0deg) translateZ(173.2px);
				-o-transform: rotateY(0deg) translateZ(173.2px);
				transform: rotateY(0deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(100px);
				-ms-transform: rotateY(0deg) translateZ(100px);
				-o-transform: rotateY(0deg) translateZ(100px);
				transform: rotateY(0deg) translateZ(100px);
			}
		}

		/*back*/

		@keyframes piece2Rotate {
			0% {
				-webkit-transform: rotateY(60deg) translateZ(173.2px);
				-ms-transform: rotateY(60deg) translateZ(173.2px);
				-o-transform: rotateY(60deg) translateZ(173.2px);
				transform: rotateY(60deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(-100px);
				-ms-transform: rotateY(0deg) translateZ(-100px);
				-o-transform: rotateY(0deg) translateZ(-100px);
				transform: rotateY(0deg) translateZ(-100px);
			}
		}

		/* Firefox */

		@-moz-keyframes piece2Rotate {
			0% {
				-webkit-transform: rotateY(60deg) translateZ(173.2px);
				-ms-transform: rotateY(60deg) translateZ(173.2px);
				-o-transform: rotateY(60deg) translateZ(173.2px);
				transform: rotateY(60deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(-100px);
				-ms-transform: rotateY(0deg) translateZ(-100px);
				-o-transform: rotateY(0deg) translateZ(-100px);
				transform: rotateY(0deg) translateZ(-100px);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes piece2Rotate {
			0% {
				-webkit-transform: rotateY(60deg) translateZ(173.2px);
				-ms-transform: rotateY(60deg) translateZ(173.2px);
				-o-transform: rotateY(60deg) translateZ(173.2px);
				transform: rotateY(60deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(-100px);
				-ms-transform: rotateY(0deg) translateZ(-100px);
				-o-transform: rotateY(0deg) translateZ(-100px);
				transform: rotateY(0deg) translateZ(-100px);
			}
		}

		/* Opera */

		@-o-keyframes piece2Rotate {
			0% {
				-webkit-transform: rotateY(60deg) translateZ(173.2px);
				-ms-transform: rotateY(60deg) translateZ(173.2px);
				-o-transform: rotateY(60deg) translateZ(173.2px);
				transform: rotateY(60deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: rotateY(0deg) translateZ(-100px);
				-ms-transform: rotateY(0deg) translateZ(-100px);
				-o-transform: rotateY(0deg) translateZ(-100px);
				transform: rotateY(0deg) translateZ(-100px);
			}
		}

		/*left*/

		@keyframes piece3Rotate {
			0% {
				-webkit-transform: rotateY(120deg) translateZ(173.2px);
				-ms-transform: rotateY(120deg) translateZ(173.2px);
				-o-transform: rotateY(120deg) translateZ(173.2px);
				transform: rotateY(120deg) translateZ(173.2px);
			}

			100% {
				-ms-transform: translateX(-100px) rotateY(90deg);
				-ms-transform: translateX(-100px) rotateY(90deg);
				-o-transform: translateX(-100px) rotateY(90deg);
				transform: translateX(-100px) rotateY(90deg);
			}
		}

		/* Firefox */

		@-moz-keyframes piece3Rotate {
			0% {
				-webkit-transform: rotateY(120deg) translateZ(173.2px);
				-ms-transform: rotateY(120deg) translateZ(173.2px);
				-o-transform: rotateY(120deg) translateZ(173.2px);
				transform: rotateY(120deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(-100px) rotateY(90deg);
				-ms-transform: translateX(-100px) rotateY(90deg);
				-o-transform: translateX(-100px) rotateY(90deg);
				transform: translateX(-100px) rotateY(90deg);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes piece3Rotate {
			0% {
				-webkit-transform: rotateY(120deg) translateZ(173.2px);
				-ms-transform: rotateY(120deg) translateZ(173.2px);
				-o-transform: rotateY(120deg) translateZ(173.2px);
				transform: rotateY(120deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(-100px) rotateY(90deg);
				-ms-transform: translateX(-100px) rotateY(90deg);
				-o-transform: translateX(-100px) rotateY(90deg);
				transform: translateX(-100px) rotateY(90deg);
			}
		}

		/* Opera */

		@-o-keyframes piece3Rotate {
			0% {
				-webkit-transform: rotateY(120deg) translateZ(173.2px);
				-ms-transform: rotateY(120deg) translateZ(173.2px);
				-o-transform: rotateY(120deg) translateZ(173.2px);
				transform: rotateY(120deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(-100px) rotateY(90deg);
				-ms-transform: translateX(-100px) rotateY(90deg);
				-o-transform: translateX(-100px) rotateY(90deg);
				transform: translateX(-100px) rotateY(90deg);
			}
		}

		/*right*/

		@keyframes piece4Rotate {
			0% {
				-webkit-transform: rotateY(180deg) translateZ(173.2px);
				-ms-transform: rotateY(180deg) translateZ(173.2px);
				-o-transform: rotateY(180deg) translateZ(173.2px);
				transform: rotateY(180deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(100px) rotateY(90deg);
				-ms-transform: translateX(100px) rotateY(90deg);
				-o-transform: translateX(100px) rotateY(90deg);
				transform: translateX(100px) rotateY(90deg);
			}
		}

		/* Firefox */

		@-moz-keyframes piece4Rotate {
			0% {
				-webkit-transform: rotateY(180deg) translateZ(173.2px);
				-ms-transform: rotateY(180deg) translateZ(173.2px);
				-o-transform: rotateY(180deg) translateZ(173.2px);
				transform: rotateY(180deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(100px) rotateY(90deg);
				-ms-transform: translateX(100px) rotateY(90deg);
				-o-transform: translateX(100px) rotateY(90deg);
				transform: translateX(100px) rotateY(90deg);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes piece4Rotate {
			0% {
				-webkit-transform: rotateY(180deg) translateZ(173.2px);
				-ms-transform: rotateY(180deg) translateZ(173.2px);
				-o-transform: rotateY(180deg) translateZ(173.2px);
				transform: rotateY(180deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(100px) rotateY(90deg);
				-ms-transform: translateX(100px) rotateY(90deg);
				-o-transform: translateX(100px) rotateY(90deg);
				transform: translateX(100px) rotateY(90deg);
			}
		}

		/* Opera */

		@-o-keyframes piece4Rotate {
			0% {
				-webkit-transform: rotateY(180deg) translateZ(173.2px);
				-ms-transform: rotateY(180deg) translateZ(173.2px);
				-o-transform: rotateY(180deg) translateZ(173.2px);
				transform: rotateY(180deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateX(100px) rotateY(90deg);
				-ms-transform: translateX(100px) rotateY(90deg);
				-o-transform: translateX(100px) rotateY(90deg);
				transform: translateX(100px) rotateY(90deg);
			}
		}

		/*top*/

		@keyframes piece5Rotate {
			0% {
				-webkit-transform: rotateY(240deg) translateZ(173.2px);
				-ms-transform: rotateY(240deg) translateZ(173.2px);
				-o-transform: rotateY(240deg) translateZ(173.2px);
				transform: rotateY(240deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(-100px) rotateX(90deg);
				-ms-transform: translateY(-100px) rotateX(90deg);
				-o-transform: translateY(-100px) rotateX(90deg);
				transform: translateY(-100px) rotateX(90deg);
			}
		}

		/* Firefox */

		@-moz-keyframes piece5Rotate {
			0% {
				-webkit-transform: rotateY(240deg) translateZ(173.2px);
				-ms-transform: rotateY(240deg) translateZ(173.2px);
				-o-transform: rotateY(240deg) translateZ(173.2px);
				transform: rotateY(240deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(-100px) rotateX(90deg);
				-ms-transform: translateY(-100px) rotateX(90deg);
				-o-transform: translateY(-100px) rotateX(90deg);
				transform: translateY(-100px) rotateX(90deg);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes piece5Rotate {
			0% {
				-webkit-transform: rotateY(240deg) translateZ(173.2px);
				-ms-transform: rotateY(240deg) translateZ(173.2px);
				-o-transform: rotateY(240deg) translateZ(173.2px);
				transform: rotateY(240deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(-100px) rotateX(90deg);
				-ms-transform: translateY(-100px) rotateX(90deg);
				-o-transform: translateY(-100px) rotateX(90deg);
				transform: translateY(-100px) rotateX(90deg);
			}
		}

		/* Opera */

		@-o-keyframes piece5Rotate {
			0% {
				-webkit-transform: rotateY(240deg) translateZ(173.2px);
				-ms-transform: rotateY(240deg) translateZ(173.2px);
				-o-transform: rotateY(240deg) translateZ(173.2px);
				transform: rotateY(240deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(-100px) rotateX(90deg);
				-ms-transform: translateY(-100px) rotateX(90deg);
				-o-transform: translateY(-100px) rotateX(90deg);
				transform: translateY(-100px) rotateX(90deg);
			}
		}

		/*bottom*/

		@keyframes piece6Rotate {
			0% {
				-webkit-transform: rotateY(300deg) translateZ(173.2px);
				-ms-transform: rotateY(300deg) translateZ(173.2px);
				-o-transform: rotateY(300deg) translateZ(173.2px);
				transform: rotateY(300deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(100px) rotateX(90deg);
				-ms-transform: translateY(100px) rotateX(90deg);
				-o-transform: translateY(100px) rotateX(90deg);
				transform: translateY(100px) rotateX(90deg);
			}
		}

		/* Firefox */

		@-moz-keyframes piece6Rotate {
			0% {
				-webkit-transform: rotateY(300deg) translateZ(173.2px);
				-ms-transform: rotateY(300deg) translateZ(173.2px);
				-o-transform: rotateY(300deg) translateZ(173.2px);
				transform: rotateY(300deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(100px) rotateX(90deg);
				-ms-transform: translateY(100px) rotateX(90deg);
				-o-transform: translateY(100px) rotateX(90deg);
				transform: translateY(100px) rotateX(90deg);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes piece6Rotate {
			0% {
				-webkit-transform: rotateY(300deg) translateZ(173.2px);
				-ms-transform: rotateY(300deg) translateZ(173.2px);
				-o-transform: rotateY(300deg) translateZ(173.2px);
				transform: rotateY(300deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(100px) rotateX(90deg);
				-ms-transform: translateY(100px) rotateX(90deg);
				-o-transform: translateY(100px) rotateX(90deg);
				transform: translateY(100px) rotateX(90deg);
			}
		}

		/* Opera */

		@-o-keyframes piece6Rotate {
			0% {
				-webkit-transform: rotateY(300deg) translateZ(173.2px);
				-ms-transform: rotateY(300deg) translateZ(173.2px);
				-o-transform: rotateY(300deg) translateZ(173.2px);
				transform: rotateY(300deg) translateZ(173.2px);
			}

			100% {
				-webkit-transform: translateY(100px) rotateX(90deg);
				-ms-transform: translateY(100px) rotateX(90deg);
				-o-transform: translateY(100px) rotateX(90deg);
				transform: translateY(100px) rotateX(90deg);
			}
		}

		/*正方体旋转动画*/

		@keyframes boxRotate {
			0% {
				-webkit-transform: rotateX(0deg) rotateY(0deg);
				-ms-transform: rotateX(0deg) rotateY(0deg);
				-o-transform: rotateX(0deg) rotateY(0deg);
				transform: rotateX(0deg) rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateX(360deg) rotateY(360deg);
				-ms-transform: rotateX(360deg) rotateY(360deg);
				-o-transform: rotateX(360deg) rotateY(360deg);
				transform: rotateX(360deg) rotateY(360deg);
			}
		}

		/* Firefox */

		@-moz-keyframes boxRotate {
			0% {
				-webkit-transform: rotateX(0deg) rotateY(0deg);
				-ms-transform: rotateX(0deg) rotateY(0deg);
				-o-transform: rotateX(0deg) rotateY(0deg);
				transform: rotateX(0deg) rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateX(360deg) rotateY(360deg);
				-ms-transform: rotateX(360deg) rotateY(360deg);
				-o-transform: rotateX(360deg) rotateY(360deg);
				transform: rotateX(360deg) rotateY(360deg);
			}
		}

		/* Safari and Chrome */

		@-webkit-keyframes boxRotate {
			0% {
				-webkit-transform: rotateX(0deg) rotateY(0deg);
				-ms-transform: rotateX(0deg) rotateY(0deg);
				-o-transform: rotateX(0deg) rotateY(0deg);
				transform: rotateX(0deg) rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateX(360deg) rotateY(360deg);
				-ms-transform: rotateX(360deg) rotateY(360deg);
				-o-transform: rotateX(360deg) rotateY(360deg);
				transform: rotateX(360deg) rotateY(360deg);
			}
		}

		/* Opera */

		@-o-keyframes boxRotate {
			0% {
				-webkit-transform: rotateX(0deg) rotateY(0deg);
				-ms-transform: rotateX(0deg) rotateY(0deg);
				-o-transform: rotateX(0deg) rotateY(0deg);
				transform: rotateX(0deg) rotateY(0deg);
			}

			100% {
				-webkit-transform: rotateX(360deg) rotateY(360deg);
				-ms-transform: rotateX(360deg) rotateY(360deg);
				-o-transform: rotateX(360deg) rotateY(360deg);
				transform: rotateX(360deg) rotateY(360deg);
			}
		}
	</style>
</head>

<body>
	<div class="container">
		<div class="piece-box">
			<div class="piece-box2">
				<div class="piece piece-1"></div>
				<div class="piece piece-2"></div>
				<div class="piece piece-3"></div>
				<div class="piece piece-4"></div>
				<div class="piece piece-5"></div>
				<div class="piece piece-6"></div>
			</div>
		</div>
	</div>
</body>

</html>